import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Card, Grid, List } from "antd-mobile";
import { TitleBlk } from "@components";
import { createAction } from "@common/utils";
import { SAGA_WAREHOUSE_QUERY_LOAD_ITEM_DETAILS } from "@store/warehouse-query/saga-types";
import { getLocList } from "@store/warehouse-query/selectors";

const ItemInfo = () => {
  const dispatch = useDispatch();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const itemDetails = useSelector((state) => state.warehouseQuery.itemDetails);
  const locList = useSelector((state) => getLocList(state));

  useEffect(() => {
    dispatch(
      createAction(SAGA_WAREHOUSE_QUERY_LOAD_ITEM_DETAILS, {
        warehouseId: searchParams.get("warehouseId"),
        barcode: searchParams.get("barcode"),
      })
    );
  }, []);

  return (
    <div style={{ marginTop: "45px" }}>
      <TitleBlk title="条码信息">
        <List>
          <List.Item
            style={{ backgroundColor: "#F5F5F5" }}
            description={
              <Card>
                <Grid columns={2} gap={12}>
                  <Grid.Item>条码</Grid.Item>
                  <Grid.Item style={{overflowWrap: 'break-word'}}>{itemDetails?.barcodeInfo.barcode}</Grid.Item>
                  <Grid.Item>所在库位</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.locationName}</Grid.Item>
                  <Grid.Item>物料编码</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.itemCode}</Grid.Item>
                  <Grid.Item>物料名称</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.itemName}</Grid.Item>
                  <Grid.Item>规格型号</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.spec}</Grid.Item>
                  <Grid.Item>数量</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.qty}</Grid.Item>
                  <Grid.Item>单位</Grid.Item>
                  <Grid.Item>{itemDetails?.barcodeInfo.unit}</Grid.Item>
                </Grid>
              </Card>
            }
          />
        </List>
      </TitleBlk>
      <TitleBlk title="库位明细">
        <List>
          <List.Item
            style={{ backgroundColor: "#F5F5F5" }}
            description={
              itemDetails?.details.length > 0 ? (
                <Card>
                  <Grid columns={2} gap={12}>
                    {locList.map((i, idx) => (
                      <Grid.Item key={idx}>{i}</Grid.Item>
                    ))}
                  </Grid>
                </Card>
              ) : null
            }
          />
        </List>
      </TitleBlk>
    </div>
  );
};

export default ItemInfo;
